<template>
	<view class="goods">
		<view class="cu-card article no-card">
			<view class="cu-item goods-item solid-bottom" v-for="(item, index) in goodsList" :key="index">
				<navigator hover-class="none" :url="'/pages/goods/goods-detail/index?id=' + item.id">
					<view class="content">
						<view class="" style="position: relative;" v-if="item.prescription=='2'">
							<view class="flex flex-column-center"
								style="position: absolute;width: 200rpx;height:100%;z-index: 50;align-items: center;">
								<view class="" style="font-size: 24rpx;">处方药依法不展示包装</view>
								<view class="" style="font-size: 24rpx;">请在药师指导下使用</view>
							</view>
							<image :src="item.picUrls[0] ? item.picUrls[0] : '/static/image/no_pic.png'"
								mode="aspectFill" class="row-img" style="filter: blur(5rpx);"></image>
						</view>
						<image :src="item.picUrls[0] ? item.picUrls[0] : '/static/image/no_pic.png'"
							mode="aspectFill" class="row-img" v-if="item.prescription!='2'"></image>
						<view class="desc block padding-top-xs">
							<view class="text-black margin-top-sm overflow-2">{{item.name}}</view>
							<view class="text-gray text-sm  overflow-1">{{item.sellPoint}}</view>
							<view class="flex ">
								<view class="cu-tag bg-red radius sm"
									v-if="item.freightTemplat&&item.freightTemplat.type == '2'">包邮</view>
								<view class="cu-tag bg-orange radius sm" v-if="item.pointsGiveSwitch == '1'">积分</view>
								<view class="text-gray text-sm padding-lr-sm">已售{{item.saleNum?item.saleNum:'0'}}</view>
								<view v-if="item.level1Brokerage" style="font-size: 22rpx;background-color: #baa898;padding: 2rpx 15rpx;border-radius: 8rpx;">
									<text class="cuIcon-moneybag" style="margin-right: 6rpx;color: #FED76A;"></text>
									<text class="text-black">赚</text>
									<text class="text-price text-black">{{ item.level1Brokerage.toFixed(2)}}</text>
								</view>
							</view>
							<view class="flex justify-between ">
								<!-- 单sku -->
								<view class="text-price text-bold text-lg text-red" v-if="item.priceDown==item.priceUp">
									<!-- 正常商品 -- 展示商品特价 -->
									<text v-if="!item.marketingPrice">{{item.priceDown?item.priceDown:'0'}}</text>
									<!-- 有全渠道活动 -- 展示活动价格 -->
									<text
										v-else-if="item.priceDown <= item.marketingPrice">{{item.marketingPrice}}</text>
									<text v-else>
										<text>{{item.marketingPrice}}</text>
										<text style="text-decoration:line-through;font-size: 22rpx;margin-left: 10rpx;"
											class="text-gray text-price">{{item.priceDown}}</text>
									</text>
								</view>
								<!-- 多sku -->
								<view class="text-price text-bold text-lg text-red" v-if="item.priceDown<item.priceUp">
									{{item.priceDown}}~{{item.priceUp}}
								</view>
								<view class="round buy text-sm shadow bg-red" :class="'bg-'+theme.themeColor">
									<text> {{item.prescription == 2?'立即预约' : '立即购买'}}</text>
								</view>
							</view>
							
						</view>
						<view class="cfBox" v-if="item.prescription == 2">处方药</view>
					    <view class="preBox" v-if="item.isPressell==1">
					    	预约
					    </view>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import api from 'utils/api'
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				theme: app.globalData.theme, //全局颜色变量
				modalCoupon: false,
				mask: false,
				couponInfoList: [1, 2],
				shopsList: [], //门店列表
				goodsId: '',
				shopInfo: {},
			};
		},
		props: {
			goodsList: {
				type: Array,
				default: () => []
			}
		},
		onLoad() {},
		mounted() {
			let that = this
			uni.$on('shopInfo', function(item) {
				that.shopInfo = item
			})
			const value = uni.getStorageSync('shopsList');
			that.shopsList = value
			uni.$on('shopsList', function(data) {
				that.shopsList = data
			})
		},
		methods: {
			showShops(id) {
				uni.$emit('goodsId', id)
				this.goodsId = id
				this.modalCoupon = true;
				this.mask = true
			},
			handel() {
				this.mask = false
			}
		}
	};
</script>
<style>
	.goods-item {
		width: 94% !important;
		margin: auto !important;
		margin-top: 20rpx !important;
		padding-left: 10rpx;
	}

	.row-img {
		margin-top: 26rpx;
		margin-left: -14rpx;
		width: 240rpx !important;
		height: 240rpx !important;
		border-radius: 10rpx
	}

	.buy {
		padding: 10rpx 20rpx 10rpx 20rpx;
	}

	/* 	.content{
		width: 100%;
		height: 200rpx;
	} */
	.goods-item {
		margin-top: 10rpx !important;
	}

	.cu-card.article>.cu-item {
		padding-bottom: 15rpx;
	}

	.cu-card.article>.cu-item .content {
		position: relative;
		padding: 0 10rpx;
	}

	.goods {
		/* position: relative; */
	}

	.cfBox {
		width: 100rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		background-color: #00a6ba;
		position: absolute;
		left: 0;
		top: 0;
		color: white;
		border-radius: 10rpx;
	}

	/* 	.box_shops{
		width: 100%;
		height: 400rpx;
		background-color: pink;
		position: fixed;
		left: 0;
		bottom: 0;
	}
	.box_bottom{
		width: 100%;
		height: 30rpx;
		background-color: red;
	} */
	
	.preBox {
		width: 240rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		background-color: #F76164;
		position: absolute;
		left: 0;
		top: 200rpx;
		color: white;
		opacity: 0.8;
		margin-top: 26rpx;
		margin-left: -4rpx;
	}
</style>
